<!-- 排班设置页 -->
<template>
  <div
    class="dashboard-container waybill-list customer-list-box"
    style="padding: 20px 20px"
  >
    <el-card>
      <el-row>
        <el-button
          type="danger"
          style="margin: 10px; background-color: #e15536"
          @click="add"
          >添加工作模式</el-button
        >
      </el-row>
      <!-- 工作模式表单 -->
      <el-table :data="tableData" :stripe="true">
        <el-table-column prop="id" label="工作模式编号" width="180">
        </el-table-column>
        <el-table-column prop="name" label="工作模式" width="180">
        </el-table-column>
        <el-table-column prop="workPatternTypeDesc" label="类型">
        </el-table-column>
        <el-table-column prop="workDate" label="工作日期"> </el-table-column>
        <el-table-column prop="workEndMinute1" label="工作时间">
          <template #default="{ row }">
            <div>
              {{
                ((row.workEndMinute1 - row.workStartMinute1) / 60).toFixed(2)
              }}小时
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="clickBianji(row)"
              >编辑</el-button
            >
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              size="small"
              style="color: #f56c6c"
              @click="delList(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageing.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageing.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-bottom: 40px; margin-top: 20px; text-align: center"
      >
      </el-pagination>

      <!-- 新增添加 -->
    </el-card>
    <el-dialog
      title="新增工作模式"
      :visible.sync="dialogVisible"
      width="40%"
      @close="closeLog"
    >
      <div class="tab-box">
        <el-tabs
          style="margin-left: 30px"
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane label="礼拜制" name="first" v-if="libai">
            <!-- 表单1 -->
            <el-form :model="form" :rules="rules" ref="addForm1">
              <el-form-item label="工作模式名称：" prop="name">
                <el-input
                  style="width: 380px"
                  placeholder="请填写工作模式名称"
                  v-model="form.name"
                ></el-input>
              </el-form-item>
              <el-form-item label="连续工作天数: " required>
                <el-checkbox-group class="workdays" v-model="form.workDate">
                  <el-checkbox
                    label="周一"
                    style="margin-right: 6px"
                  ></el-checkbox>
                  <el-checkbox
                    label="周二"
                    style="margin-right: 6px"
                  ></el-checkbox>
                  <el-checkbox
                    label="周三"
                    style="margin-right: 6px"
                  ></el-checkbox>
                  <el-checkbox
                    label="周四"
                    style="margin-right: 6px"
                  ></el-checkbox>
                  <el-checkbox
                    label="周五"
                    style="margin-right: 12px"
                  ></el-checkbox>
                  <el-checkbox
                    label="周六"
                    style="margin-right: 12px"
                  ></el-checkbox>
                  <el-checkbox label="周日"></el-checkbox>
                </el-checkbox-group>
                <el-col style="margin-left: 110px; color: #bac0cd">
                  选中为工作时间，未选中为休息时间
                </el-col>
              </el-form-item>
              <el-form-item
                required
                label="工作时间:"
                label-width="110px"
                style="margin-left: -20px; margin-right: 5px"
              >
                <el-time-picker
                  @change="checkRequired"
                  is-range
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  placeholder="选择时间范围"
                  v-model="value1"
                >
                </el-time-picker>
                <span v-if="isRequired && !value1" style="color: red"
                  >该项为必填项</span
                >
              </el-form-item>
              <div style="text-align: center">
                <span
                  slot="footer"
                  class="dialog-footer"
                  style="text-align: center"
                >
                  <el-button type="danger" @click="addbtnOk('1')"
                    >确 定</el-button
                  >
                  <el-button @click="closeLog">取 消</el-button>
                </span>
              </div>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="连续制" name="second" v-if="lianxu">
            <!-- 表单二 -->
            <el-form :model="form" :rules="rules" ref="addForm2">
              <el-form-item label="工作模式名称：" prop="name">
                <el-input
                  style="width: 380px"
                  placeholder="请填写工作模式名称"
                  v-model="form.name"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="连续工作天数: "
                :prop="isTrusted ? 'workDayNum' : 'restDayNum'"
              >
                上<el-input
                  style="width: 110px; margin-right: 21px; margin-left: 10px"
                  placeholder="请输入"
                  v-model="form.workDayNum"
                  @focus="xixi"
                >
                  <template slot="hahah"
                    ><span
                      style="
                        color: black;
                        font-weight: 400;
                        font-size: 14px;
                        margin-right: 14px;
                        line-height: 40px;
                      "
                      >天</span
                    >
                  </template>
                </el-input>
                休<el-input
                  style="width: 110px; margin-right: 21px; margin-left: 10px"
                  placeholder="请输入"
                  v-model="form.restDayNum"
                >
                  <template slot="hahah"
                    ><span
                      style="
                        color: black;
                        font-weight: 400;
                        font-size: 14px;
                        margin-right: 14px;
                        line-height: 40px;
                      "
                      >天</span
                    >
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item
                label="工作时间:"
                label-width="120px"
                style="margin-left: -20px; margin-right: 5px"
                required
              >
                <el-time-picker
                  @change="checkRequired"
                  is-range
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  placeholder="选择时间范围"
                  v-model="value1"
                >
                </el-time-picker>
                <span v-if="isRequired && !value1" style="color: red"
                  >该项为必填项</span
                >
              </el-form-item>
            </el-form>
            <div style="text-align: center">
              <span
                slot="footer"
                class="dialog-footer"
                style="text-align: center"
              >
                <el-button type="danger" @click="addbtnOk('2')"
                  >确 定</el-button
                >
                <el-button @click="closeLog">取 消</el-button>
              </span>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  workHistoryList,
  deleteWorkHistory,
  updateWorkHistory,
  addWorkHistory
} from '@/api/transit'
export default {
  data() {
    return {
      libai: true,
      lianxu: true,
      edit: false,
      isTrusted: false,
      id: '',
      selectedDate: '',
      isRequired: true,
      value1: [new Date(2016, 9, 10, 8, 60), new Date(2016, 9, 10, 17, 60)],
      activeName: 'first',
      tableData: [],
      pageing: {
        page: 1,
        pageSize: 10
      },
      name: '',
      total: 0,
      dialogVisible: false,
      form: {
        name: '', //名称
        workDate: [], //工作日期
        workStartMinute1: '', //开始时间,
        workEndMinute1: '', //结束时间
        workDayNum: '', //连续时间
        restDayNum: '', //休息时间
        workPatternType: '1',
        // 周一到周日，默认为二
        monday: '2',
        tuesday: '2',
        wednesday: '2',
        thursday: '2',
        friday: '2',
        saturday: '2',
        sunday: '2'
      },
      rules: {
        name: [
          { required: true, message: '请输入工作模式名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],

        workDayNum: [
          { required: true, message: '请输入连续工作天数', trigger: 'blur' },
          { pattern: /^\d+$/, message: '请输入数字', trigger: 'blur' }
        ],
        restDayNum: [
          { required: true, message: '请输入连续工作天数', trigger: 'blur' },
          { pattern: /^\d+$/, message: '请输入数字', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 列表渲染
    async getList() {
      const res = await workHistoryList(this.pageing)
      console.log(res)
      this.tableData = res.data.items
      this.pageing.page = res.data.page
      this.pageing.pageSize = res.data.pageSize
      this.total = +res.data.counts
    },
    /* 分页 */
    handleSizeChange(newSize) {
      this.pageing.pageSize = newSize
      this.getList()
    },
    handleCurrentChange(newpage) {
      this.pageing.page = newpage
      this.getList()
    },
    /* 删除 */
    async delList(data) {
      this.$confirm('确定要删除吗?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deleteWorkHistory(data),
            this.$message({
              type: 'success',
              message: '删除成功!'
            }),
            this.getList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    /* 点击新增弹窗 */
    add() {
      this.dialogVisible = true
      this.edit = false
      this.libai = true
      this.lianxu = true
    },
    /* 关闭弹窗 */
    closeLog() {
      this.dialogVisible = false
      this.form = {
        name: '', //名称
        workDate: [], //工作日期
        workStartMinute1: '', //开始时间,
        workEndMinute1: '', //结束时间
        workDayNum: '', //连续时间
        restDayNum: '', //休息时间
        workPatternType: '1',
        // 周一到周日，默认为二
        monday: '2',
        tuesday: '2',
        wednesday: '2',
        thursday: '2',
        friday: '2',
        saturday: '2',
        sunday: '2'
      }
      ;(this.value1 = [
        new Date(2016, 9, 10, 8, 60),
        new Date(2016, 9, 10, 17, 60)
      ]),
        (this.activeName = 'first')
      // this.$refs.addForm1.resetFields()
      // this.$refs.addForm2.resetFields()
      if (this.libai === true) {
        this.$refs.addForm1.resetFields()
      }
      if (this.lianxu === true) {
        this.$refs.addForm2.resetFields()
      }
    },
    /* 提交 */
    // addbtnOk() {
    //   this.$refs.addForm.validate(async (isok) => {
    //     if (isok) {
    //       await addWorkHistory(this.form)
    //       this.$message.success('添加成功')
    //       this.getList()
    //       this.closeLog()
    //     } else {
    //       this.$message.warning('✳为必填')
    //     }
    //   })
    // },
    // 时间必填校验
    checkRequired() {
      if (this.isRequired && !this.selectedDate) {
        // 当前值为空且为必填项时，进行提示
        console.log('该项为必填项')
      }
    },
    // 聚焦时间来选择校验的input框
    xixi(e) {
      console.log(111)
      console.log(e)
    },
    handleClick(tab, event) {
      console.log(tab)
      const haha = +tab._data.index
      this.workPatternType = haha + 1
      console.log(this.workPatternType)
    },
    /* 提交 */
    // 点击工作确认提交
    async addbtnOk(workPatternType) {
      // 日期开始和结束时间
      this.form.workStartMinute1 = getTimer(this.value1[0])
      this.form.workEndMinute1 = getTimer(this.value1[1])
      // 工作模式
      this.form.workPatternType = workPatternType
      // 修改星期绑定
      this.form.workDate.forEach(item => {
        if (item === '周一') {
          this.form.monday = '1'
        }
        if (item === '周二') {
          this.form.tuesday = '1'
        }
        if (item === '周三') {
          this.form.wednesday = '1'
        }
        if (item === '周四') {
          this.form.thursday = '1'
        }
        if (item === '周五') {
          this.form.friday = '1'
        }
        if (item === '周六') {
          this.form.saturday = '1'
        }
        if (item === '周日') {
          this.form.sunday = '1'
        }
      })
      if (workPatternType === '1') {
        this.$refs.addForm1.validate(async valid => {
          if (valid) {
            if (this.edit === true) {
              await updateWorkHistory({ ...this.form, id: this.id })
              this.$message.success('编辑成功')
            } else {
              await addWorkHistory(this.form)
              this.$message.success('添加成功')
            }
            this.getList()
            this.closeLog()
          } else {
            this.$message.warning('✳为必填')
          }
        })
      }
      if (workPatternType === '2') {
        this.$refs.addForm2.validate(async valid => {
          if (valid) {
            if (this.edit === true) {
              await updateWorkHistory({ ...this.form, id: this.id })
              this.$message.success('编辑成功')
            } else {
              await addWorkHistory(this.form)
              this.$message.success('添加成功')
            }
            this.getList()
            this.closeLog()
          } else {
            this.$message.warning('✳为必填')
          }
        })
      }
      // 处理时间的函数
      function getTimer(date) {
        let time = new Date(date)
        let h = time.getHours()
        h = h < 10 ? '0' + h : h
        let m = time.getMinutes()
        m = m < 10 ? '0' + m : m
        let s = time.getSeconds()
        s = s < 10 ? '0' + s : s
        const timeString = h + ':' + m + ':' + s
        const [hours, minutes, seconds] = timeString.split(':')
        const totalMinutes = parseInt(hours) * 60 + parseInt(minutes)
        return totalMinutes
      }
      // 工作星期时间
    },
    // 点击编辑按钮
    clickBianji(row) {
      console.log(row)
      this.id = row.id
      this.edit = true
      this.form.workDate = []
      if (row.workPatternType === 1) {
        this.libai = true
        this.lianxu = false
        if (row.monday === 1) {
          this.form.workDate.push('周一')
        }
        if (row.tuesday === 1) {
          this.form.workDate.push('周二')
        }
        if (row.wednesday === 1) {
          this.form.workDate.push('周三')
        }
        if (row.thursday === 1) {
          this.form.workDate.push('周四')
        }
        if (row.friday === 1) {
          this.form.workDate.push('周五')
        }
        if (row.saturday === 1) {
          this.form.workDate.push('周六')
        }
        if (row.sunday === 1) {
          this.form.workDate.push('周日')
        }
      }
      if (row.workPatternType === 2) {
        ;(this.form.workDayNum = row.workDayNum), //连续时间
          (this.form.restDayNum = row.restDayNum), //休息时间
          (this.libai = false)
        this.lianxu = true
        this.activeName = 'second'
      }
      function convertToTimeFormat(minutes) {
        const hours = Math.floor(minutes / 60) // 获取小时部分
        const remainingMinutes = minutes % 60 // 获取分钟部分

        return [hours, remainingMinutes]
      }
      ;(this.value1 = [
        new Date(2023, 9, 10, ...convertToTimeFormat(row.workStartMinute1)),
        new Date(2023, 9, 10, ...convertToTimeFormat(row.workEndMinute1))
      ]),
        (this.form.name = row.name)
      // console.log(this.workForm.workDate)
      this.dialogVisible = true
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .table-card-box {
  .el-card__body {
    padding-bottom: 0px;
  }
}
::v-deep .pagination {
  padding-bottom: 30px;
}
.tab-box {
  color: #20232a;
  ::v-deep .el-tabs__item.is-active {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
  }
  ::v-deep .el-form-item__content {
    height: 40px;
  }
  ::v-deep .el-tabs__item {
    font-size: 14px;
  }
  ::v-deep .el-tabs__item:hover {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #e15536;
  }
  ::v-deep .tips {
    margin-left: 130px;
    margin-bottom: 14px;
    color: #bac0cd;
  }
  .el-checkbox {
    margin-right: 12px;
  }
  ::v-deep .workDay {
    .el-form-item__error {
      position: relative;
    }
  }
}
::v-deep .el-dialog__body {
  padding-top: 30px !important;
  .el-tabs__header {
    padding-bottom: 25px;
  }
}
::v-deep .el-tabs__nav,
.is-top {
  transform: translateX(30px) !important;
}
.workdays {
  width: 410px;
  display: flex;
  justify-content: space-around;
}
.el-dialog__footer {
  text-align: center;
}
</style>
